<template>
  <el-card>
    <template #header>
      <div class="percent-header">
        <span>销售额类别占比</span>
        <el-radio-group v-model="saleRankType" size="small">
          <el-radio-button label="全部渠道"></el-radio-button>
          <el-radio-button label="线上"></el-radio-button>
          <el-radio-button label="门店"></el-radio-button>
        </el-radio-group>
      </div>
    </template>
    <p class="percent-title">销售额</p>
    <div class="chart" ref="myline"></div>
  </el-card>
</template>

<script>
import { mapState } from 'vuex'
import * as echarts from 'echarts'
import resize from '@/mixins/resize'
export default {
  name: 'Percent',
  data() {
    return {
      saleRankType: '线上',
      pieData: []
    }
  },
  mixins: [resize],
  mounted() {
    // 注意必须要给chart给宽高
    // 初始化
    this.myEchart = echarts.init(this.$refs.myline)
    this.myEchart.setOption({})
    this.myEchart.on('mouseover', params => {
      // 控制台打印数据的名称
      this.myEchart.setOption({
        title: {
          text: params.data.name,
          subtext: params.data.value
        }
      })
    })
  },
  computed: {
    ...mapState({
      saleRank: state => state.home.homeData.saleRank
    })
  },
  watch: {
    // 从父元素得到的数据，监听数据的来从无到有变化一次，实现初始化
    saleRank: {
      handler(val) {
        this.handle2Arr(this.saleRank.online)
        this.myEchart.setOption({
          title: {
            text: '视频广告',
            subtext: '300',
            top: '43%',
            left: 'center',
            textStyle: {
              fontSize: '16',
              fontWeight: 'normal'
            },
            subtextStyle: {
              fontSize: '22',
              color: '#000',
              fontWeight: '700',
              lineHeight: '30'
            }
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: ['28%', '60%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderColor: '#fff',
                borderWidth: 2
              },

              // 设置
              label: {
                formatter: '{b}:{c}',
                fontWeight: 'normal',
                color: 'rgba(0,0,0,.85)'
              },
              labelLine: {
                //label线的长度
                normal: {
                  length: 20, // 改变标示线的长度
                  length2: 20,
                  maxSurfaceAngle: 80,
                  lineStyle: {
                    color: '#333' // 改变标示线的颜色
                  }
                }
              },
              data: this.pieData
            }
          ]
        })
      }
    },
    saleRankType: {
      handler(val) {
        // 清空数据
        this.pieData = []
        switch (val) {
          case '线上':
            this.handle2Arr(this.saleRank.online)
            break
          case '门店':
            this.handle2Arr(this.saleRank.shop)
            break
          case '全部渠道':
            this.getTotal()
            break
        }
        this.myEchart.setOption({
          series: {
            data: this.pieData
          }
        })
        // 清空上一次的数据
      }
    }
  },
  methods: {
    // 处理把online，shop转换为数组
    handle2Arr(obj) {
      // 提取对象的所有的keys,返回是一个数组
      let pieKeys = Object.keys(obj)
      // 如果有name属性则，遍历
      if (pieKeys.indexOf('name') !== -1) {
        obj.name.forEach((keyname, index) => {
          this.pieData.push({
            name: keyname,
            value: obj.value[index]
          })
        })
        return
      }
      // 如果没有name,对每一个子对象进行遍历递归
      if (pieKeys.indexOf('name') === -1) {
        pieKeys.forEach(item => {
          this.handle2Arr(obj[item])
        })
      }
    },
    // 处理全部渠道的数据，整合在一块
    getTotal() {
      this.handle2Arr(this.saleRank.online)
      this.pieData = this.pieData.map((item, index) => {
        return {
          name: item.name,
          value: item.value + this.saleRank.shop.value[index]
        }
      })
    }
  }
}
</script>

<style scoped>
.percent-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 20px;
}
.percent-title {
  font-size: 14px;
  padding-right: 40px;
}
.chart {
  width: 100%;
  height: 450px;
}
</style>
